<template>
  <div class="playing-item-wrapper">
    <div class="playing-item" :style="item" v-for="(item, index) of styles" :key="index" ref="playingItem"></div>
  </div>
</template>

<script>
import { px2rem } from '../../utils/utils'

export default {
  name: 'SpeakPlaying',
  props: {
    number: Number
  },
  computed: {
    styles () {
      const styles = new Array(this.number)
      for (let i = 0; i < styles.length; i++) {
        // 随机生成高度
        styles[i] = {
          height: px2rem(this.random()) + 'rem'
        }
      }
      return styles
    }
  },
  methods: {
    startAnimation () {
      this.task = setInterval(() => {
        this.$refs.playingItem.forEach(item => {
          // 每个元素随机生成高度
          item.style.height = px2rem(this.random()) + 'rem'
        })
      }, 200)
    },
    stopAnimation () {
      // 停止动画
      if (this.task) {
        clearInterval(this.task)
      }
    },
    random () {
      // 向上取整
      return Math.ceil(Math.random() * 10)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .playing-item-wrapper
    center()
    .playing-item
      flex: 0 0 px2rem(2)
      width: px2rem(2)
      height: px2rem(1)
      background: $color-blue
      margin-left: px2rem(2)
      transition: all .2s ease-in-out
      &:first-child
        margin: 0
</style>
